<template>
  <div class="bg-no-repeat bg-[length:100%_auto] bg-top" style="background-image: url('/images/background.jpg');">
    <el-container class="h-screen flex flex-col bg-transparent">
      <el-header class="flex-shrink-0 bg-white/70 backdrop-blur-sm p-0 h-[40px]">
        <LayoutHeader />
      </el-header>
      <el-main class="flex-1 overflow-y-auto py-5 px-0">
        <div class="max-w-4xl mx-auto w-full h-full flex flex-col">
          <LayoutSubNavBar class="mb-4 flex-shrink-0" />
          <div class="flex-1 min-h-0">
            <NuxtPage />
          </div>
        </div>
      </el-main>
      <el-footer class="flex-shrink-0 p-0  h-[40px]">
        <LayoutFooter />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// All Element Plus components are automatically imported by the module
</script>

<style scoped>
/* All styles are now handled by TailwindCSS classes. */
</style>